<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"  xmlns:c="http://www.example.org/Cinecartaz">
  <xsl:template match="/">
    <html>
      <head>
        <title>Movies on <xsl:value-of select="c:cinema/c:location/c:title/text()"/></title>

        <script language="javascript">
        function unhide(divID) {
          var item = document.getElementById(divID);
          if (item) {
              item.className=(item.className=='hidden')?'unhidden':'hidden';
          }
        }
        </script>

        <style type="text/css">

            body
            {
            margin:10px;
            background-color:#80CCCC;
            font-family:Tahoma, Geneva, sans-serif;
            font-size:normal;

            background-image: url("iPadBackgroundTexture-grey.png");
            background-position: 50% 50%;
            background-repeat: repeat;

            }

            a:link {
            COLOR: #FFFFFF;
            font-weight:bold;
            font-size:x-small;
            }
            a:visited {
            COLOR: #FFFFFF;
            font-weight:bold;
            font-size:x-small;
            }
            a:hover {
            COLOR: #FFFFFF;
            font-weight:bold;
            font-size:x-small;
            }
            a:active {
            COLOR: #FFFFFF;
            font-weight:bold;
            font-size:x-small;
            }
            
            .cinema-name
            {
            font-weight:bold;
            color:#E6E6E6;
            font-size:large;
            font-family:"Trebuchet MS", Helvetica, sans-serif;
            }
            
            .cinema-infoHeader
            {
            color:#CCCCCC;
            font-weight:bold;
            }

            .cinema-text
            {
            font-weight:bold;
            color:#CCCCCC;
            font-size:large;
            }

            .cinema-infoTable
            {
            color:#CCCCCC;
            font-size:xx-small;
            font-weight:bold;
            }

            .textTable
            {
            color:#000000;
            font-size:small;
            font-weight:bold;
            }
            
            .cinema-url
            {
            color:#636363;
            font-size:small;
            font-style:italic;
            }

            .cinema-address
            {
            color:#E6E6E6;
            font-size:x-small;
            font-style:italic;
            }

            .cinema-telephone
            {
            display:block;
            color:#E6E6E6;
            font-size:small;
            font-style:italic;
            }

            .cinema-actor
            {
            display:block;
            color:#ffffff;
            font-size:x-small;
            }

            .cinema-textTable
            {
            display:block;
            color:#ffffff;
            font-size:x-small;
            }

            .cinema-textTitleTable
            {
            display:block;
            color:#ffffff;
            font-size:x-small;
            font-weight:bold;
            }

            .cinema-sessions
            {
            display:block;
            color:#ffffff;
            font-size:x-small;
            font-weight:bold;
            }
            
            .hidden { 
            display: none;
            }

            .unhidden {
            display: block;
            color:#E6E6E6;
            font-size:x-small;
            font-style:italic;
            }

            .table-box {
            opacity:0.5;
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
            -khtml-opacity:0.5;
            }

            .table-text {
            font-family: Helvetica, Arial, Verdana, sans-serif;
            font-size: 12px;
            color: #33CC33;
            opacity:1;
            filter:alpha(opacity=100);
            -moz-opacity:1;
            -khtml-opacity:1;
            }

        </style>



      </head>
      <body>

        <p>
        <center>
        <span class="cinema-text">Movie list for:  </span>
        <span class="cinema-name"><xsl:value-of select="c:cinema/c:location/c:title/text()"/></span>
        </center>
        </p>

        <hr></hr>
        
        <xsl:apply-templates select="c:cinema/c:movies" />
        
        <hr></hr>
        
        <xsl:apply-templates select="c:cinema/c:location" />
        
      </body>
    </html>
  </xsl:template>

  <xsl:template match="c:location">

    <table border="0">
    
    <tr>
      <xsl:attribute name="valign">top</xsl:attribute>
      <td><span class="cinema-infoHeader">Telephones:</span></td>
      <td>
        <xsl:for-each select="c:telephone">
            <span class="cinema-telephone"><xsl:value-of select="."/><xsl:text> </xsl:text></span>
        </xsl:for-each>
        
      </td>
    </tr>
    
    <tr>
      <xsl:attribute name="valign">top</xsl:attribute>
      <td><span class="cinema-infoHeader">Address:</span></td>
      <td><span class="cinema-address"><xsl:value-of select="c:address/text()"/></span>
      </td>
    </tr>
        
  </table>
  
  <xsl:variable name="geo" select="c:geolocation/text()"/>
    <iframe width="325" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="{$geo}&amp;ie=UTF8&amp;hq=R.+Dr.+Manuel+Arriaga,+Centro+Comercial+Carcavelos+(Junto+%C3%A0+Esta%C3%A7%C3%A3o+de+CP),+Portugal&amp;hnear=&amp;t=h&amp;vpsrc=0&amp;ll=38.687768,-9.341197&amp;spn=0.006295,0.006295&amp;output=embed"></iframe><br /><small><a href="{$geo}" style="color:#0000FF;text-align:left">Ver mapa maior</a></small>
    
  </xsl:template>
  
  <xsl:template match="c:movies">
    <xsl:for-each select="c:movie">

        <table width="100%" border="0" cellspacing="0" cellpadding="10">
            <tr bgcolor="#676767">
            <xsl:attribute name="valign">top</xsl:attribute>
            <td width="20%">
                <xsl:attribute name="align">center</xsl:attribute>
                <xsl:apply-templates select="c:banner" />
            </td>
            <td>
                <table>

                    <tr>

                    <td><span class="cinema-infoTable">Title:</span></td>
                    <td><span class="cinema-textTitleTable"><xsl:value-of select="c:title/text()"/></span></td>

                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td><span class="cinema-infoTable">Year:</span></td>
                    <td><span class="cinema-textTable"><xsl:value-of select="c:year/text()"/></span></td>

                    </tr>

                    <tr>
                    
                    <td><span class="cinema-infoTable">Original Title:</span></td>
                    <td>
                        <xsl:variable name="originalURL"><xsl:value-of select="@url"/></xsl:variable>
                        <xsl:choose>
                            <xsl:when test="$originalURL=''">
                                <span class="cinema-textTitleTable"><xsl:value-of select="c:originalTitle/text()"/></span>
                            </xsl:when>
                            <xsl:otherwise>
                                <div><a href="{$originalURL}" name="xxx"><xsl:value-of select="c:originalTitle/text()"/></a></div>
                            </xsl:otherwise>
                        </xsl:choose>
                    </td>
                    
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    
                    <td><span class="cinema-infoTable">Classification:</span></td>
                    <td><span class="cinema-textTable"><xsl:value-of select="c:classification/text()"/></span></td>
                    
                    </tr>
                    
                    <tr>
                    
                    <td><span class="cinema-infoTable">Director:</span></td>
                    <td><span class="cinema-actor"><xsl:value-of select="c:director/text()"/></span></td>
                    
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td><span class="cinema-infoTable">Country:</span></td>
                    <td>
                        <xsl:choose>
                            <xsl:when test="c:country=''">
                                <span class="cinema-textTable">Information not available</span>
                            </xsl:when>
                            <xsl:otherwise>
                                <span class="cinema-textTable"><xsl:value-of select="c:country/text()"/></span>
                            </xsl:otherwise>
                        </xsl:choose>
                    </td>

                    </tr>

                    <tr>
                    <xsl:attribute name="valign">top</xsl:attribute>

                    <td><span class="cinema-infoTable">Cast:</span></td>
                    <td>
                        <xsl:choose>
                            <xsl:when test="not(child::c:cast/c:actor)">
                                <span class="cinema-actor">Information not available</span>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:for-each select="c:cast/c:actor">
                                    <span class="cinema-actor"><xsl:value-of select="."/><xsl:text> </xsl:text></span>
                                </xsl:for-each>
                            </xsl:otherwise>
                        </xsl:choose>
                    </td>

                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td><span class="cinema-infoTable">Genres:</span></td>
                    <td>
                        <xsl:for-each select="c:genres/c:genre">
                            <span class="cinema-textTable"><xsl:value-of select="."/><xsl:text> </xsl:text></span>
                        </xsl:for-each>
                    </td>

                    </tr>

                    <tr>
                    <xsl:attribute name="valign">top</xsl:attribute>

                    <td><span class="cinema-infoTable">Sessions:</span></td>
                    <td>
                        <xsl:choose>
                            <xsl:when test="not(child::c:sessions)">
                                <span class="cinema-sessions">Information not available</span>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:for-each select="c:sessions">
                                    <span class="cinema-sessions"><xsl:value-of select="."/><xsl:text> </xsl:text></span>
                                </xsl:for-each>
                            </xsl:otherwise>
                        </xsl:choose>
                    </td>

                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td><span class="cinema-infoTable">Rooms:</span></td>
                    <td>
                        <xsl:choose>
                            <xsl:when test="not(child::c:room)">
                                <span class="cinema-sessions">Information not available</span>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:for-each select="c:room">
                            <span class="cinema-sessions"><xsl:value-of select="."/><xsl:text> </xsl:text></span>
                        </xsl:for-each>
                            </xsl:otherwise>
                        </xsl:choose>
                    </td>

                    </tr>
                </table>
            </td>
            </tr>

            <tr bgcolor="#000000">
            <xsl:attribute name="valign">top</xsl:attribute>
            <td>
                <xsl:attribute name="valign">top</xsl:attribute>
                <xsl:attribute name="align">center</xsl:attribute>
                <xsl:variable name="trailer" select="c:trailer/text()"/>
                <xsl:if test="$trailer!=''">
                    <div><a href="{$trailer}" name="xxx">Trailer</a></div>
                </xsl:if>
            </td>
            <td>
                <xsl:attribute name="valign">top</xsl:attribute>
                <xsl:variable name="titleX" select="generate-id(.)"/>
                <p><a href="#" onclick="unhide('{$titleX}');">Sinopsis</a></p>
                <div id="{$titleX}" class="hidden"><xsl:value-of select="c:sinopsis/text()"/></div>
            </td>

            </tr>

            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>
            <tr></tr>

        </table>
    </xsl:for-each>
  </xsl:template>
  
  <xsl:template match="c:banner">
        <img src="{.}">
            <xsl:attribute name="width">140</xsl:attribute>
            <xsl:attribute name="height">190</xsl:attribute>
        </img>
  </xsl:template>
  
  
  
</xsl:stylesheet>